<template>
    <div class="cart-wrap" ref="cartWrap">
        <a-modal :getContainer="()=>this.$refs.cartWrap" :visible="visible" @cancel="cancel"  :footer="null">
            <span style="padding: 0 50px;display: flex;justify-content: space-between;" slot="title">
                <div class="left">
                    购物车
                </div>
                <div class="right">
                    <span style="margin:0 8px;color: orange;">
                        <template v-if="hasSelected">
                        {{ `选择了 ${selectedRowKeys.length} 项` }}
                        </template>
                    </span>
                    <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="settle">
                        结算
                    </a-button>
                </div>
            </span>
            <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="data">
                <div style="width: 60px;height: 60px;border-radius: 10px;overflow: hidden;" slot="skuImg" slot-scope="text">
                    <img  :src="text"></img>  
                </div>
                <span style="color:orange" slot="price" slot-scope="text">{{ text }}</span>
                <span style="color:red" slot="totalPrice" slot-scope="text">{{ text }}</span>
                <span slot="action">
                    <a>删除</a>
                    <a-divider type="vertical" />
                    <a>结算</a>
                </span>
            </a-table>
        </a-modal>
    </div>
  </template>
  
  <script>
const columns = [
  {
    dataIndex: 'skuImg',
    key: 'skuImg',
    title: '商品图片',
    scopedSlots: { customRender: 'skuImg' },
    width:200
  },
  {
    title: '商品名称',
    dataIndex: 'title',
    key: 'title',
    width:200
  },
  {
    title: '商品信息',
    dataIndex: 'info',
    key: 'info',
    width:200
  },
  {
    title: '单价',
    key: 'price',
    dataIndex: 'price',
    scopedSlots: { customRender: 'price' },
    width:100
  },
  {
    title: '数量',
    key: 'num',
    dataIndex: 'num',
    scopedSlots: { customRender: 'num' },
    width:100
  },
  {
    title: '总价',
    key: 'totalPrice',
    dataIndex: 'totalPrice',
    scopedSlots: { customRender: 'totalPrice' },
    width:100
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    width:100
  },
];

const imgUrl='https://gw.alicdn.com/bao/uploaded/i3/725677994/O1CN01iHOoCV28vIwqhfBPQ_!!725677994.jpg_Q75.jpg_.webp'
const data = [
  {
    key: '1',
    skuImg: imgUrl,
    title: '我是一个商品',
    info: '我是商品描述',
    price: 5,
    num:10,
    totalPrice:100
  },
  {
    key: '2',
    skuImg: imgUrl,
    title: '我是一个商品',
    info: '我是商品描述',
    price: 5,
    num:10,
    totalPrice:100
  },
  {
    key: '3',
    skuImg: imgUrl,
    title: '我是一个商品',
    info: '我是商品描述',
    price: 5,
    num:10,
    totalPrice:100
  },
  {
    key: '4',
    skuImg: imgUrl,
    title: '我是一个商品',
    info: '我是商品描述',
    price: 5,
    num:10,
    totalPrice:100
  },
  {
    key: '5',
    skuImg: imgUrl,
    title: '我是一个商品',
    info: '我是商品描述',
    price: 5,
    num:10,
    totalPrice:100
  },
];
  export default {
    name: 'cart',
    components: {
      
    },
    data(){
        return{
            data,
            columns,
            selectedRowKeys:[],
            loading: false,
        }
    },
    props:['visible'],
    methods:{
        cancel(){
            this.$emit('cartNotShow')
        },
        onSelectChange(selectedRowKeys) {
            console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        settle() {
            this.loading = true;
            // ajax request after empty completing
            setTimeout(() => {
                this.loading = false;
                this.selectedRowKeys = [];
            }, 1000);
        },
    },
    computed:{
        hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
    }
  }
  </script>
  
  <style scoped lang="less">
  .cart-wrap{
    /deep/ .ant-modal{
        width: auto !important;
    }
  }
  </style>
  